<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import UserSelect from '@/components/AllUserSelect/index.vue';
import { UserVO } from '@/api/system/user/types';

const props = defineProps<{
  modelValue?: any[];
  disabled?: boolean;
}>();
const emit = defineEmits(['update:modelValue', 'update:handlerUserName']);
const data = useVModel(props, 'modelValue', emit);
const userSelectRef = ref<InstanceType<typeof UserSelect>>();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const { handler_user_type } = toRefs<any>(proxy?.useDict('handler_user_type'));

const form = reactive({
  coordinators: data.value || []
});

const open = () => {
  userSelectRef.value.open();
};

const callBack = (user?: UserVO[]) => {
  if (!user || user.length === 0) {
    return;
  }
  const newCoordinators = user.map((item) => ({
    handlerUserId: item.userId,
    handlerUserName: item.nickName,
    expectedStartTime: '',
    expectedEndTime: '',
    isNew: true
  }));
  if (data.value && data.value.length > 0) {
    data.value = data.value.concat(
      newCoordinators.filter((newItem) => !data.value.some((existing) => existing.handlerUserId === newItem.handlerUserId))
    );
  } else {
    data.value = newCoordinators;
  }
  form.coordinators = data.value;
};

const handleRemoveCoordinator = (index: number) => {
  data.value.splice(index, 1);
  form.coordinators = data.value;
};

const handleClose = (i: number) => {
  if (props.disabled === false) {
    data.value.splice(i, 1);
    form.coordinators = data.value;
  }
};
</script>

<template>
  <div class="coordinator-container">
    <el-form ref="coordinatorFormRef" :model="form" label-width="80px">
      <el-form-item v-for="(item, i) in data" :key="item.handlerUserId" prop="`coordinators.${i}`">
        <el-row type="flex" :gutter="10">
          <el-col :span="4">
            <el-input v-model="item.handlerUserName" :disabled="props.disabled" placeholder="请输入协调人姓名" />
          </el-col>
          <el-col :span="4">
            <el-select v-model="item.handlerUserType" placeholder="人员类型">
              <el-option v-for="dict in handler_user_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-date-picker
              v-model="item.expectedStartTime"
              clearable
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择预计开始时间"
              :disabled="props.disabled"
            ></el-date-picker>
          </el-col>
          <el-col :span="7">
            <el-date-picker
              v-model="item.expectedEndTime"
              clearable
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择预计结束时间"
              :disabled="props.disabled"
            ></el-date-picker>
          </el-col>
          <el-col>
            <el-button type="danger" size="small" :disabled="props.disabled" @click="handleRemoveCoordinator(i)"> 删除 </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-button plain :disabled="props.disabled" class="add-coordinator-button" @click="open"> +</el-button>
    <user-select ref="userSelectRef" :multiple="true" @confirm-call-back="callBack"></user-select>
  </div>
</template>

<style scoped lang="scss">
.coordinator-container {
  display: flex;
  flex-direction: column;
}

.add-coordinator-button {
  align-self: flex-end;
  margin-top: 10px;
}
.el-row {
  flex-wrap: nowrap;
}
</style>
